<template>
    <Layout>
        <Header><span @click="choseCanvasOrExcel = true;choseCellModel=false" class="hand"><img
                src="../assets/canvas.png" alt="">画布</span><span
                @click="choseCanvasOrExcel = false" class="hand"><img src="../assets/excel.png" alt="">excel</span>
            <a href="https://www.sougn.com/report/have.html" class="url">示例报表</a>
            <a href="https://www.sougn.com" class="url">官网</a>
            <span @click="exportCanvas">导出报表</span>
        </Header>
        <Layout v-show="choseCanvasOrExcel == false">
            <div class="excel">
                <div id="excel" class="excel-body"></div>
            </div>
        </Layout>
        <keep-alive>
            <Layout v-if="choseCanvasOrExcel == true">
                <Content>
                    <WorkCanvas v-model="canvas" :canvasSize="canvasSize" @choseComponent="choseComponent"
                                ref="workCanvasNeed"></WorkCanvas>
                    <Zoom v-model="canvasSize"></Zoom>

                </Content>
                <Sider hide-trigger width="250">
                    <Config v-model="canvas" ref="config" :luckysheet="luckysheet"
                            @deleteComponent="deleteComponent"
                            @canvasChange="canvasChange"
                            @openModel="choseCellModelChange"
                            @dataChange="dataChange"></Config>
                </Sider>
            </Layout>
        </keep-alive>
        <Modal v-model="choseCellModel" draggable sticky scrollable :mask="false" title="选择选取" @on-ok="sureCell">
            <div>选取：<span>{{ choseCellNow }}</span></div>
            <!--<div>值：<span></span></div>-->
        </Modal>
    </Layout>
</template>

<script>
    import WorkCanvas from '../components/WorkCanvas.vue';
    import Config from '../components/Config.vue';
    import Zoom from '../components/Zoom.vue';
    import {Canvas} from '../entity/Canvas';
    import {LuckySheet} from '../entity/LuckySheet';

    export default {
        name: "Home2",
        components: {Config, LuckySheet, Zoom, WorkCanvas},
        data() {
            let canvas = new Canvas();
            var that = this;
            return {
                canvas: canvas.getCanvasInfo(),
                canvasSize: 100,
                options: {
                    showinfobar: false,
                    lang: "zh",
                    container: 'excel', //luckysheet为容器id
                    data: [
                        {
                            "name": "Cell", //工作表名称
                            "color": "", //工作表颜色
                            "index": 0, //工作表索引
                            "status": 1, //激活状态
                            "order": 0, //工作表的下标
                            "hide": 0,//是否隐藏
                            "row": 36, //行数
                            "column": 18, //列数
                            "defaultRowHeight": 19, //自定义行高
                            "defaultColWidth": 73, //自定义列宽
                            "celldata": [{
                                "r": 0,
                                "c": 0,
                                "v": {
                                    ct: {fa: "General", t: "g"},
                                    m: "value1",
                                    v: "value1"
                                }
                            }], //初始化使用的单元格数据
                            "config": {
                                "merge": {}, //合并单元格
                                "rowlen": {}, //表格行高
                                "columnlen": {}, //表格列宽
                                "rowhidden": {}, //隐藏行
                                "colhidden": {}, //隐藏列
                                "borderInfo": {}, //边框
                                "authority": {}, //工作表保护

                            },
                            "scrollLeft": 0, //左右滚动条位置
                            "scrollTop": 0, //上下滚动条位置
                            "luckysheet_select_save": [], //选中的区域
                            "calcChain": [],//公式链
                            "isPivotTable": false,//是否数据透视表
                            "pivotTable": {},//数据透视表设置
                            "filter_select": {},//筛选范围
                            "filter": null,//筛选配置
                            "luckysheet_alternateformat_save": [], //交替颜色
                            "luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色
                            "luckysheet_conditionformat_save": {},//条件格式
                            "frozen": {}, //冻结行列配置
                            "chart": [], //图表配置
                            "zoomRatio": 1, // 缩放比例
                            "image": [], //图片
                            "showGridLines": 1, //是否显示网格线
                            "dataVerification": {} //数据验证配置
                        },
                        {
                            "name": "Sheet2",
                            "color": "",
                            "index": 1,
                            "status": 0,
                            "order": 1,
                            "celldata": [],
                            "config": {}
                        },
                        {
                            "name": "Sheet3",
                            "color": "",
                            "index": 2,
                            "status": 0,
                            "order": 2,
                            "celldata": [],
                            "config": {},
                        }
                    ],
                    hook: {
                        updated: function () {
                            // 数据变化时候驱动
                            that.data++;
                        },
                        rangeSelect: function (cell, position) {
                            that.choseCellNow = $("#luckysheet-helpbox-cell").text();

                        }
                    }
                },
                choseCanvasOrExcel: false,
                choseConfig: [],
                data: 0,
                choseCellModel: false,
                choseCellNow: "",
                luckysheet: luckysheet
            }
        },
        mounted() {
            // 获取初始化excel
            // window.localStorage.clear()
            if (window.localStorage.getItem('excel') != undefined) {
                this.options = JSON.parse(window.localStorage.getItem('excel')).data;
                // 添加hook函数
                this.options.hook = {
                    updated: () => {
                        // 数据变化时候驱动
                        this.data++;
                    },
                    rangeSelect: (cell, position) => {
                        this.choseCellNow = $("#luckysheet-helpbox-cell").text();
                    }
                }
            }
            new LuckySheet("excel", this.options);
            // 定时保存excel
            setInterval(() => {
                var excel = {
                    time: new Date(),
                    data: this.options
                }
                window.localStorage.setItem('excel', JSON.stringify(excel));
            }, 500);

        },
        methods: {
            /**
             * 选择组件
             */
            choseComponent(item) {
                this.$refs.config.choseConfigFun(item);
                this.choseConfig = item;
                this.$store.state.tab = 'config';
            },
            sureCell: function () {
                console.log(this.choseCellNow)
                // 数据变化
                this.data++;
                this.choseCanvasOrExcel = true;
                var that = this;
                setTimeout(function () {
                    that.$refs.config.sureCell(that.choseCellNow)
                }, 200);

            },
            deleteComponent(uuid) {
                let canvas = new Canvas();
                canvas.deleteComponent(uuid);
                this.canvas = canvas.getCanvasInfo();
            },
            canvasChange() {
                this.choseCanvasOrExcel = false;
            },
            choseCellModelChange(status) {
                this.choseCellModel = status;
            },
            dataChange() {
                this.data++;
            },
            // 清空本地所有的缓存
            clearAllExcelAndCanvas(excel, canvas) {
                this.data = 0;
                // 清空缓存
                window.localStorage.removeItem("excel");
                window.localStorage.removeItem("canvas");
                // 清空本地
                this.canvas = canvas;
                this.excel = excel;
                // 重新渲染excel

                this.data++;
            },
            exportCanvas:function (){

            }
        },
        watch: {
            data: {
                handler(newVal, oldVal) {
                    if (this.$refs.workCanvasNeed == undefined) {
                        return;
                    }
                    this.$refs.workCanvasNeed.dataChange();
                },
                immediate: true,
                deep: true
            }
        }
    }
</script>

<style scoped lang="scss">
    .hand {
        cursor: pointer;
        font-size: 12px;

        img {
            width: 12px;
            height: 12px;
            margin-right: 3px;
            margin-top: 3px;
        }

        margin-right: 8px;

    }

    .ivu-layout-has-sider {
        height: 300px;
    }

    .url {
        font-size: 12px;
        float: right;
        margin-right: 10px;
    }

    .ivu-layout-header {
        padding: 0px;
        height: 20px;
        line-height: 20px;
        background-color: #fff;
    }

    .ivu-layout {
        height: 100%;
    }

    .excel {
        width: 100%;
        height: calc(100% - 1px);
    }

    .excel-body {
        height: 100%;
        width: 100%;
    }
</style>
